<template>
	<view class="flex-center" @click="$emit('click',$event)" :style="{width:`calc(${size} * 2rpx)`,height:`calc(${size} * 2rpx `}" >
		<image v-if="path&&!isErr" :src="path"  :style="{width:`calc(${size} * 2rpx)`,height:`calc(${size} * 2rpx)`}" @error="error"></image>
		<u-icon v-else :size="size"  :color="color" :name="name"></u-icon>
	</view>
</template>

<script>
	export default {
		name:"w-icon",
		props:{
			name:String,
			color:{
				type:String,
				default:"black"
			},
			size:{
				type:[Number,String],
				default:14
			}
		},
		data() {
			return {
				isErr:false,
			};
		},
		computed:{
			path(){
				return `${this.$originOssUrl}/static/icon/${this.name}.png`
			}
		},
		mounted() {
			
			
		},
		methods:{
			error(err){
				this.isErr=true;
			}
		}
	}
</script>

<style lang="scss">

</style>